<template>
	<view class="pre-con page-wrapper">
		<view class="card-four">
			<view v-for="card in precon" :key="card.class" :class="['card-item',card.class]" @click="again(card)">
				<text class="card-title">{{ card.title }}</text>
				<image :src="card.image77" mode="scaleToFill" class="card-img77" />
				<view class="arrow">
					<u-icon name="arrow-right" size="46rpx" bold="false"></u-icon>
				</view>
			</view>
			<view class="container">
				<view class="modal">
					<u-modal v-model="show" 
					:show-cancel-button="true" 
					:show-confirm-button="true" 
					confirm-text="继续自测" 
					cancel-text="返回园地" 
					width="600rpx"
					:show-title="false"
					:title-style="{color: 'bule'}">
						<view class="slot-content" 
						style="text-align: center; 
						align-items: center; display: flex;
						margin-left: 50rpx;
						flex; height: 200rpx;">
							一天只能随机自测一次，是否继续？
						</view>
					</u-modal>
				</view>
			</view>
		</view>
		<CTabbar currentPath="/pages/learnSelftesting/index"></CTabbar>
	</view>
</template>

<script>
	import CTabbar from "@/components/CTabbar";
	export default {
		components: {
			CTabbar,
		},
		data() {
			return {
				show: false,
				precon: [{
						title: "学习资料",
						class: "first-card",
						to:'/pages/learnData/index',
						image77: this.$getImageUrl("images/xuexiziliao@2x.png"),
					},
					{
						title: "学习题库",
						class: "second-card",
						to:'/pages/learnAnalysis/learnAnalysis',
						image77: this.$getImageUrl("images/xuexitiku@2x.png"),
					},
					{
						title: "随机自测",
						class: "third-card",
						image77: this.$getImageUrl("images/suijizice@2x.png"),
					},
					{
						title: "考试中心",
						class: "fourth-card",
						to:'/pages/examManager/index',
						image77: this.$getImageUrl("images/kaoshizhongxin@2x.png"),
					},

				],

			};
		},
		computed: {},
		methods: {
			again(card) {
				uni.navigateTo({
					url: card.to,
					fail: (error) => {
						console.log(error);
					}
				});
				if (card.title === '随机自测') {
					this.show = true;
				}
			}
			// open(card) {
			// 	console.log(card);
				
			// }
		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad() {},
		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	};
</script>

<style scoped lang="scss">
	.pre-con {
		overflow: scroll;
		padding: 0 74rpx;
		background-color: #F0F5FB;
	}

	.card-item {
		height: 204rpx;
		background: #fff;
		box-shadow: 0 20rpx 40rpx 0 #409eff0d;
		border-radius: 40rpx;
		margin-top: 60rpx;
		position: relative;
		padding: 60rpx;

		.card-title {
			font-size: 52rpx;
			font-weight: 500;
			font-family: PingFangSC-Medium;
			position: absolute;
			top: 64rpx;
			left: 150rpx;
		}

		.card-img77 {
			width: 66rpx;
			height: 66rpx;
			position: absolute;
			left: 68rpx;
			top: 68rpx;
			z-index: 100;
		}

		&.first-card {
			.card-title {
				color: #409eff;
				position: absolute;
				z-index: 101;
			}

			.arrow {
				color: #409EFF;
				position: absolute;
				right: 60rpx;
				top: 78rpx;
				// font-size: 55rpx;
				width: 22rpx;
				height: 24rpx;
			}
		}
		
		&.second-card{
			.card-title {
				color: #409eff;
				position: absolute;
				z-index: 101;
			}
			
			.arrow {
				color: #409EFF;
				position: absolute;
				right: 60rpx;
				top: 78rpx;
				// font-size: 55rpx;
				width: 22rpx;
				height: 24rpx;
			}
		}

		&.third-card {
			.card-title {
				color: #BD2D2C;
				position: absolute;
				z-index: 101;
			}

			.arrow {
				position: absolute;
				right: 60rpx;
				top: 78rpx;
				// font-size: 55rpx;
				width: 22rpx;
				height: 24rpx;
				color: #BD2D2C;
			}
		}
		
		&.fourth-card {
			.card-title {
				color: #BD2D2C;
				position: absolute;
				z-index: 101;
			}
		
			.arrow {
				position: absolute;
				right: 60rpx;
				top: 78rpx;
				// font-size: 55rpx;
				width: 22rpx;
				height: 24rpx;
				color: #BD2D2C;
			}
		}
	}
</style>
